/*
* 参考文章
* https://www.sass.hk/guide/
* https://blog.csdn.net/qq_40815009/article/details/119295172
* https://blog.csdn.net/weixin_45682952/article/details/120214915
* `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号;
*/

// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
// @use "element-plus/theme-chalk/src/index.scss" as *;

// 关于scss使用vue.config.js引入变量和标签样式问题
// 因为vue.config.js引入会加上scope-data属性，如果是标签在此处引入生效
// @import '@/styles/variables.scss';
$primary-color: #2261E0; // 主题色
$element-hover: rgba(0, 0, 0, .08); // 元素hover背景色
$success-color: #52c41a; // 成功色
$warning-color: #faad14; // 警告色
$error-color: #f5222d; // 错误色
$export-color:#009688;
$import-color: #5FB878;
$white-color: #fff; // 白色
$black-color: #000; //黑色
$menu-bg-color: #001529; //菜单颜色
$box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
$bg-color: #f5f5f5;
$view-color: #eeeeee;
$font-color: #333;
$text-color: #242424;

$distance-list: 5 10 15 20; // 常用margin,padding距离
$dis-way: 'top' 'right' 'bottom' 'left'; // 常用margin,padding方向

$color-list-name: 'primary' 'success' 'warning' 'error' 'export' 'import' 'white' 'black' 'bg' 'view' 'font';
$color-list: $primary-color $success-color $warning-color $error-color $export-color $import-color $white-color $black-color $bg-color $view-color $font-color;

// 媒体查询定义字体大小
$screen-list:3840px 2560px 2048px 1920px 1680px 1600px 1440px 1280px 1024px 960px 800px 640px;

// 让1920px 定义字体大小50px，最小640px 字体大小是  640*50/1920 = 16.67
// 防止出现浏览器兼容性问题，将html的font-size设为>=12px
// 1920px 1rem = 10px
@each $screen in $screen-list {
  $calculateFontsize: calc($screen * 10 / 1920);
  @media screen and (max-width: $screen) { 
    html,body{
      font-size: $calculateFontsize
    }
  }
}

// 颜色
@each $color in $color-list{
    $i:index($color-list,$color);
    $name:nth($color-list-name,$i);
    .#{$name}-color{
        color: $color
    }

    .#{$name}-bg-color{
        background-color: $color
    }

    .#{$name}-border-color{
        border-color: $color
    }

    .#{$name}-color:hover{
        color: $color
    }
    .#{$name}-bg-color:hover{
        background-color: $color;
        opacity: 0.7;
    }
    .#{$name}-border-color:hover{
        border-color: $color
    }
}
// 边圆角
@for $i from 1 through 10 {
    $radious: 0.1rem * $i;
    $name: $i;
    .border-#{$name} {
        border-radius: $radious;
    }
}
/* 外边距margin padding内边距 */
@for $i from 1 through 4 {
    $distance: nth($distance-list, $i);
    $name: $i*5;
    $dis: 0.1rem * $distance;

    .margin-#{$name} {
        margin: $dis;
    }

    .padd-#{$name} {
        padding: $dis;
        box-sizing: border-box;
    }

    @for $j from 1 through 4 {
        $way: nth($dis-way, $j);
        .margin-#{$way}-#{$name} {
            margin-#{$way}: $dis;
        }

        .padd-#{$way}-#{$name} {
            padding-#{$way}: $dis;
            box-sizing: border-box;
        }
    }
}

:root{
    --primary-color: #{$primary-color};
    --element-hover: #{$element-hover};
    --success-color: #{$success-color};
    --warning-color: #{$warning-color};
    --error-color: #{$error-color};
    --export-color:#{$export-color};
    --import-color: #{$import-color};
    --white-color: #{$white-color};
    --black-color: #{$black-color};
    --menu-bg-color: #{$menu-bg-color};
    --box-shadow-base: #{$box-shadow-base};
    --bg-color: #{$bg-color};
    --view-color: #{$view-color};
    --font-color: #{$font-color};
    --text-color: #{$text-color};
}

.menu-bg-color{
    background-color: $menu-bg-color;
}
